<template>
  <div class="patientInfo">
    <div><button class="addBtn" @click="modal1 = true">＋ 新增</button></div>
    <div class="tab">
      <Table border :columns="columns1" :data="data1">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.username }}</strong>
        </template>
        <template slot-scope="{ row }" slot="IDcard" class="card">
          <div>{{ row.idCard }}</div>
        </template>
        <template slot-scope="{ row }" slot="sex" class="card">
          <div>{{ row.sex == "1" ? "男" : "女" }}</div>
        </template>
        <template slot-scope="{ row }" slot="birthday" class="card">
          <div>{{ row.birthday }}</div>
        </template>
        <template slot-scope="{ row }" slot="mobile" class="card">
          <div>{{ row.mobile }}</div>
        </template>
        <template slot-scope="{ row }" slot="visitCardNo" class="card">
          <img :src="row.img" alt="" v-if="row.img" />
          <div>{{ row.visitCardNo }}</div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row)"
            >编辑</Button
          >
          <Button type="error" size="small" @click="remove(row.id)"
            >删除</Button
          >
        </template>
      </Table>
      <!-- <div class="page">
        <Page
        @on-page-size-change="changePageSize"
          :total="100"
          :page-size="5"
          size="small"
          show-sizer
          show-total
          show-elevator
          :page-size-opts="allSize"
        />
      </div> -->
    </div>
    <!-- 增加弹框 -->
    <Modal v-model="modal1" title="新增" @on-ok="ok" @on-cancel="cancel">
      <div class="input">
        <div class="import"><span style="color: #f73446">*</span>姓名:</div>
        <div class="input-box">
          <Input
            v-model="patientInfo.username"
            placeholder="请输入姓名"
            style="
              width: 300px;
              margin-left: 4px;
              font-size: calc(14 / 1920 * 100vw);
              color: #b3b3b3;
            "
          />
        </div>
      </div>
      <div class="input">
        <div class="import"><span style="color: #f73446">*</span>身份证号:</div>
        <div class="input-box">
          <Input
            v-model="patientInfo.idCard"
            placeholder="请输入身份证号"
            style="
              width: 300px;
              margin-left: 4px;
              font-size: calc(14 / 1920 * 100vw);
              color: #b3b3b3;
            "
          />
        </div>
      </div>
      <div class="input">
        <div class="import"><span style="color: #f73446">*</span>性别:</div>
        <div class="input-box">
          <Select v-model="defultSex" style="width: 300px" @on-change="change">
            <Option v-for="(item, i) in sex" :value="item.value" :key="i">{{
              item.label
            }}</Option>
          </Select>
        </div>
      </div>
      <div class="input">
        <div class="import"><span style="color: #f73446">*</span>出生日期:</div>
        <div class="input-box">
          <Row>
            <Col span="12">
              <DatePicker
                type="date"
                @on-change="handleChange"
                placeholder="请选择"
                style="width: 300px"
              ></DatePicker>
            </Col>
          </Row>
        </div>
      </div>
      <div class="input">
        <div class="import"><span style="color: #f73446">*</span>手机号:</div>
        <div class="input-box">
          <Input
            v-model="patientInfo.mobile"
            placeholder="请输入手机号"
            style="
              width: 300px;
              margin-left: 4px;
              font-size: calc(14 / 1920 * 100vw);
              color: #b3b3b3;
            "
          />
        </div>
      </div>
    </Modal>
    <Modal
      v-model="modal2"
      title="删除咨询人"
      @on-ok="ok2"
      @on-cancel="cancel2"
    >
      <p style="text-align: center">是否确认删除咨询人?</p>
    </Modal>
  </div>
</template>

<script>
import { getPatientiList, addPatienti, delPatienti } from "@/api/patintInfo.js";
export default {
  data() {
    return {
      modal1: false,
      modal2: false,
      columns1: [
        {
          title: "姓名",
          key: "username",
          align: "center",
        },
        {
          title: "身份证号",
          align: "center",
          key: "idCard",
          minWidth: 100,
        },
        {
          title: "性别",
          key: "sex",
          align: "center",
          slot: "sex",
        },
        {
          title: "出生日期",
          key: "birthday",
          align: "center",
        },
        {
          title: "手机号",
          key: "mobile",
          align: "center",
          minWidth: 70,
        },
        {
          title: "就诊卡",
          slot: "visitCardNo",
          minWidth: 130,
          key: "visitCardNo",
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          minWidth: 100,
          align: "center",
        },
      ],
      data1: [],
      // 性别下拉框
      defultSex: "男",
      sex: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      total:0,
      // 患者信息
      patientInfo: {
        username: "",
        idCard: "",
        sex: "",
        mobile: "",
        birthday: "",
      },
      allSize: [5, 10, 15, 20],
      delarr: "",
      result:false
    };
  },
  beforeCreate() {},
  mounted() {
    this.getpatientiList();
  },
  methods: {
    // 获取患者列表
    getpatientiList() {
      getPatientiList().then((res) => {
        this.data1 = res.result;
      });
    },
    handleChange(date) {
      this.patientInfo.birthday = date;
    },
    ok() {
      let data = this.patientInfo;
      console.log(data);
      addPatienti(data).then((res) => {
        if (res.success) {
          this.patientInfo = {};
          this.getpatientiList();
        }
      });
    },
    // 修改患者信息
    editpatientInfo() {
      let data = {
        birthday: this.patientInfo.birthday,
        idCard: this.patientInfo.idCard,
        mobile: this.patientInfo.mobile,
        sex: this.patientInfo.sex,
        userId: this.patientInfo.userId,
        username: this.patientInfo.username,
        visitCardNo: this.patientInfo.visitCardNo,
      };
      addPatienti(data).then((res) => {
        if (res.success) {
          this.patientInfo = {};
          this.getpatientiList();
        }
      });
    },
    show(v) {
      this.modal1 = true;
      console.log(v);
      this.patientInfo.birthday = v.birthday;
      this.patientInfo.idCard = v.idCard;
      this.patientInfo.mobile = v.mobile;
      this.patientInfo.sex = v.sex;
      this.patientInfo.userId = v.userId;
      this.patientInfo.username = v.username;
      this.patientInfo.id = v.id;
    },
    // 删除患者
    ok2() {
      let data = {
        ids:this.delarr
      }
      delPatienti(data).then((res) => {
        if (res.success) {
          this.delarr = "";
          this.getpatientiList();
        }
      });
    },
    remove(id) {
      this.delarr = id;
      this.modal2 = true;
    },
    cancel() {},
    cancel2() {},
    change(v) {
      this.patientInfo.sex = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.patientInfo {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(288 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
  .addBtn {
    padding: calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw);
    background: #fd5151;
    line-height: calc(32 / 1920 * 100vw);
    text-align: center;
    border-radius: calc(4 / 1920 * 100vw);
    color: #fff;
    border: none;
  }
}
.tab {
  margin-top: calc(20 / 1920 * 100vw);
}
::v-deep.ivu-table-cell-slot {
  text-align: center;
  padding: calc(20 / 1920 * 100vw);
  img {
    width: calc(150 / 1920 * 100vw);
    height: calc(150 / 1920 * 100vw);
  }
}
.page {
  margin-left: auto;
  margin-top: calc(40 / 1920 * 100vw);
}
.import {
  width: calc(100 / 1920 * 100vw);
  text-align: right;
  margin-right: calc(20 / 1920 * 100vw);
}
.input {
  display: flex;
  align-items: center;
  margin-top: calc(20 / 1920 * 100vw);
  color: #333333;
  font-size: calc(14 / 1920 * 100vw);
}
.input-box {
  ::v-deep.ivu-input-wrapper {
    margin-left: 0 !important;
  }
}
::v-deep.ivu-modal-header {
  border: none;
}
::v-deep.ivu-modal-footer {
  border: none;
}
::v-deep.ivu-modal {
  top: 140px;
}
</style>